<!DOCTYPE html>
<html lang="en"   xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)"   th:with="portUrl=${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/'}">
    <meta charset="utf-8"/>
    <title >源码时代-权限管理系统</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" th:href="@{|${portUrl}assets/vendor/bootstrap/css/bootstrap.min.css|}">
	<link rel="stylesheet" th:href="@{|${portUrl}assets/vendor/font-awesome/css/font-awesome.min.css|}">
	<link rel="stylesheet" th:href="@{|${portUrl}assets/vendor/linearicons/style.css|}">
	<link rel="stylesheet" th:href="@{|${portUrl}assets/vendor/chartist/css/chartist-custom.css|}">
	<link rel="stylesheet" th:href="@{|${portUrl}assets/vendor/toastr/toastr.min.css|}">
	<link rel="stylesheet" th:href="@{|${portUrl}assets/css/build.css|}" >
	<link rel="stylesheet" th:href="@{|${portUrl}assets/css/bootstrap-select.min.css|}" >
	<!-- MAIN CSS -->
	<link rel="stylesheet" th:href="@{|${portUrl}assets/css/main.css|}">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" th:href="@{|${portUrl}assets/css/demo.css|}">
	<!-- GOOGLE FONTS -->
	<link th:href="@{https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700}" rel="stylesheet">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" th:href="@{|${portUrl}assets/img/apple-icon.png|}">
	<link rel="icon" type="image/png" sizes="96x96" th:href="@{|${portUrl}assets/img/favicon.png|}">
	<script th:src="@{|${portUrl}assets/vendor/jquery/jquery.min.js|}"></script>
	<script th:src="@{|${portUrl}assets/vendor/bootstrap/js/bootstrap.min.js|}"></script>
	<script th:src="@{|${portUrl}assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js|}"></script>
	<script th:src="@{|${portUrl}assets/vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js|}"></script>
	<script th:src="@{|${portUrl}assets/vendor/chartist/js/chartist.min.js|}"></script>
	<script th:src="@{|${portUrl}assets/scripts/klorofil-common.js|}"></script>	
	<script th:src="@{|${portUrl}assets/vendor/toastr/toastr.min.js|}"></script>		
</head>
<body>
<div th:fragment="navbar">
<nav class="navbar navbar-default navbar-fixed-top">
			<div class="brand">
				<a href="index.html"><img src="assets/img/logo-dark.png" alt="Klorofil Logo" class="img-responsive logo"></a>
			</div>
			<div class="container-fluid">
				<div class="navbar-btn">
					<button type="button" class="btn-toggle-fullwidth"><i class="lnr lnr-arrow-left-circle"></i></button>
				</div>
				<form class="navbar-form navbar-left">
					<div class="input-group">
						<input type="text" value="" class="form-control" placeholder="Search dashboard...">
						<span class="input-group-btn"><button type="button" class="btn btn-primary">Go</button></span>
					</div>
				</form>
				<div class="navbar-btn navbar-btn-right">
					<a class="btn btn-success update-pro" href="#downloads/klorofil-pro-bootstrap-admin-dashboard-template/?utm_source=klorofil&utm_medium=template&utm_campaign=KlorofilPro" title="Upgrade to Pro" target="_blank"><i class="fa fa-rocket"></i> <span>UPGRADE TO PRO</span></a>
				</div>
				<div id="navbar-menu">
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle icon-menu" data-toggle="dropdown">
								<i class="lnr lnr-alarm"></i>
								<span class="badge bg-danger">5</span>
							</a>
							<ul class="dropdown-menu notifications">
								<li><a href="#" class="notification-item"><span class="dot bg-warning"></span>System space is almost full</a></li>
								<li><a href="#" class="notification-item"><span class="dot bg-danger"></span>You have 9 unfinished tasks</a></li>
								<li><a href="#" class="notification-item"><span class="dot bg-success"></span>Monthly report is available</a></li>
								<li><a href="#" class="notification-item"><span class="dot bg-warning"></span>Weekly meeting in 1 hour</a></li>
								<li><a href="#" class="notification-item"><span class="dot bg-success"></span>Your request has been approved</a></li>
								<li><a href="#" class="more">See all notifications</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="lnr lnr-question-circle"></i> <span>Help</span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="#">Basic Use</a></li>
								<li><a href="#">Working With Data</a></li>
								<li><a href="#">Security</a></li>
								<li><a href="#">Troubleshooting</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="assets/img/user.png" class="img-circle" alt="Avatar"> <span th:text="${session.USER_IN_SESSION?.username}"></span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="#"><i class="lnr lnr-user"></i> <span>My Profile</span></a></li>
								<li><a href="#"><i class="lnr lnr-envelope"></i> <span>Message</span></a></li>
								<li><a href="#"><i class="lnr lnr-cog"></i> <span>Settings</span></a></li>
								<li><a href="/exit"><i class="lnr lnr-exit"></i> <span>Logout</span></a></li>
							</ul>
						</li>
						<!-- <li>
							<a class="update-pro" href="#downloads/klorofil-pro-bootstrap-admin-dashboard-template/?utm_source=klorofil&utm_medium=template&utm_campaign=KlorofilPro" title="Upgrade to Pro" target="_blank"><i class="fa fa-rocket"></i> <span>UPGRADE TO PRO</span></a>
						</li> -->
					</ul>
				</div>
			</div>
		</nav>
</div>

<div th:fragment="sidebar">
      	<!-- LEFT SIDEBAR -->
		<div id="sidebar-nav" class="sidebar">
			<div class="sidebar-scroll">
				<nav>
					<ul class="nav">
					    <li th:each="menu1 : ${menulist}" >
							  <a th:href="|#${menu1.id}|" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"  th:class="${menu1.icon}"></i> <span th:text="${menu1.name}">Pages</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
							  <div th:id="${menu1.id}" class="collapse ">
							   <ul class="nav">
									    <li th:each="menu2 : ${menu1.children}"  >
									     <a href=""  th:href="${menu2.url}"  class=""    target="myIfram"> <i th:class="${menu2.icon}"  style="font-size: 15px"></i><span  th:text="${menu2.name}"></span></a>
									</li>																									
								</ul>				
							</div>
						</li>
				
						
					</ul>
				</nav>
			</div>
		</div>
		<!-- END LEFT SIDEBAR -->
</div>

<th:block th:fragment="footer">
	    <footer>
			<div class="container-fluid">
				<p class="copyright">&copy; 2020<a href="#" target="_blank">Theme I Need</a></a> - Collect from <a href="http://www.itsource.cn/" title="源码时代" target="_blank">源码时代</a></p>
			</div>
		</footer>
		</th:block>

<th:block  th:fragment="modal">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" 
						aria-hidden="true">
				</button>
				<p class="modal-title" id="myModalLabel">
									
				   </p>
			</div>
			<div class="modal-body">
			
			</div>
			
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 
   </th:block>
</body>
</html>